<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <title>Demo</title>
    <link rel="stylesheet" href="../css/parallax.css">
    <link rel="stylesheet" href="../css/parallax-animation.css">
    <link href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body{
            color: #ffffff;
        }
        h2{
            text-align: center;
        }
        .mycontbox>h2{
            padding: 0;
            margin: 0;
        }
        .page1{
            background-color: #000000;
        }
        .myhedbox{
            width: 8rem;
            height: 8rem ;
            border-radius: 50%;
            margin: 1rem auto;
            background: url("../img/2017-05-24_160201.png") no-repeat 0 -1.3rem;
            background-size: 100% auto ;
        }

        .myname > h2{
            font-size: 2.3rem;
        }
        .mytel > h2,
        .myemail > h2{
            margin-top: 1.5rem;
            font-size: 1.3rem;
        }
        .mycontbox > h2{
            margin-top: 1rem;
            font-size: 1.8rem;
        }
        .myjyboxbac{
            text-indent: .5em;
            margin-top: 1.2rem;
        }
        .myjyboxbac > span{
            font-size: 1.35rem;
        }
        .myjyboxbac1{
            text-indent: 2.5em;
        }
        .myjyboxbac2{
            text-indent: 4.5em;
        }
        .myzwjs{
            text-indent: 2em;
            font-size: 1rem;
        }
        .myzwjsbox>p{
            font-size: .8rem;
        }
        .myzwjsbox{
            margin-top: 1rem;
            padding: 0 1.3rem;
        }
        .myjybox1 > span{
            padding-left: 1rem;
            font-size: 1.1rem;
        }
        .myyqd{
            text-indent: 2em;
            font-size: .8rem;
            margin-top: .3rem;
        }
        .myhttp > h3{
            text-align: center;
            margin-top: 2rem;
            font-size: 1.3rem;
        }
    </style>
</head>
<body>
<div class="wrapper">
    <div class="pages">
        <div class="page page1">
            <div class="myhedbox" data-animation="fadeIn"></div>
            <div class="myname" data-animation="fadeIn" data-delay="100">
                <h2>胡俊</h2>
            </div>
            <div class="mytel" data-animation="fadeIn" data-delay="200">
                <h2>电话：<span style="color: rgba(0, 189, 239, 0.45);">13440137994</span></h2>
            </div>
            <div class="myemail" data-animation="fadeIn" data-delay="300">
                <h2>email：<span>azearlys@yahoo.com</span></h2>
            </div>
            <div class="myemail" data-animation="fadeIn" data-delay="400">
                <h2>求职意向：<span>web前端</span></h2>
            </div>
            <div class="myhttp" data-animation="fadeIn" data-delay="500">
                <h3>连接：<a href="http://web.cdqsedu.com/tags/胡俊"  style="color: rgba(0, 189, 239, 0.45);font-size: .95rem;">http://web.cdqsedu.com/tags/胡俊</a></h3>
            </div>
        </div>
        <div class="page page1">
            <div class="mycontbox"><h2>基本信息</h2></div>
            <div class="myjyboxbac" data-animation="fadeIn" data-delay="100"><span>教育背景：</span></div>
            <div class="myjyboxbac1 myjyboxbac" data-animation="fadeIn" data-delay="200"><span>2014—2016</span></div>
            <div class="myjyboxbac2 myjyboxbac" data-animation="fadeIn" data-delay="300"><span>四川天一学院</span></div>
            <div class="myjyboxbac2 myjyboxbac" data-animation="fadeIn" data-delay="400"><span>大专</span></div>
            <div class="myjyboxbac2 myjyboxbac" data-animation="fadeIn" data-delay="500"><span>建筑工程系</span> <span>建筑工程管理</span></div>
        </div>
        <div class="page page1">
            <div class="mycontbox"><h2>个人简介</h2></div>
            <div class="myzwjsbox" data-animation="fadeIn" data-delay="50">
                <p class="myzwjs">
                    因为不是个计算机专业学生，选择参加web前端这一方面的工作，
                    是因为自己对前端产生兴趣，想要在这一方面尝试一下发展。
                    又因本人不是学计算机的从而在学校参加了这次的培训。
                </p>
            </div>
            <div class="myzwjsbox" data-animation="fadeIn" data-delay="100">
                <div class="myjybox1"><span>自我评价</span></div>
                <p class="myyqd" data-animation="fadeIn" data-delay="200">
                    	对于web前端有十足的兴趣与爱好，从而以非计算机专业学生来学习web前端。
                </p>
                <p class="myyqd" data-animation="fadeIn" data-delay="250">
                    	拥有较强的组织能力和适应能力、并能够很快的融进团队。
                </p>
                <p class="myyqd" data-animation="fadeIn" data-delay="300">
                    	具备良好的心理素质，个人修养，个人关系以及良好的团队工作精神。
                </p>
                <p class="myyqd" data-animation="fadeIn" data-delay="350">
                    	反应能力，应变能力强，踏实勤奋，节奏快，效率高。
                </p>
                <p class="myyqd" data-animation="fadeIn" data-delay="400">
                    	能很好很快接受新事物，具有较强的学习能力。
                </p>
                <p class="myyqd" data-animation="fadeIn" data-delay="450">
                    	有激情，有进取精神，工作认真踏实
                </p>
            </div>
        </div>
        <div class="page page1">
            <div class="mycontbox"><h2>项目经验</h2></div>
            <div class="myzwjsbox">
                <h4 style="text-indent: 1em;font-size: 1rem;" data-animation="fadeIn" data-delay="100">校园管理系统的编辑</h4>
                <p class="myzwjs" style="text-indent: 3em;" data-animation="fadeIn" data-delay="150">负责内容是学生管理模块:</p>
                <p style="text-indent: 5em;" data-animation="fadeIn" data-delay="200">实现设计UI在该部分的页面重构</p>
                <p style="text-indent: 5em;" data-animation="fadeIn" data-delay="250">所用框架：bootstrap框架 </p>
                <p style="text-indent: 5em;" data-animation="fadeIn" data-delay="300">与后台完成数据的交互，并将其显现</p>
            </div>
            <div class="myzwjsbox">
                <h4 style="text-indent: 1em;" data-animation="fadeIn" data-delay="350">购房网站移动端web页面</h4>
                <p class="myzwjs" style="text-indent: 3em;" data-animation="fadeIn" data-delay="450">负责内容是页面编写和功能实现:</p>
                <p style="text-indent: 2em;padding-left: 3em;" data-animation="fadeIn" data-delay="400">完成设计UI的页面重构</p>
                <p style="text-indent: 2em;padding-left: 3em;" data-animation="fadeIn" data-delay="450">使用zepto以及hammer实现事件的绑定</p>
                <p style="text-indent: 2em;padding-left: 3em;" data-animation="fadeIn" data-delay="550">实现地区房源模块和房源信息模块的开发实现</p>
                <p style="text-indent: 2em;padding-left: 3em;" data-animation="fadeIn" data-delay="500">与后台完成数据的交互，使用Handlebars模板引擎实现</p>
            </div>
        </div>
        <div class="page page1">
            <div class="mycontbox"><h2>个人技能</h2></div>
            <div class="myzwjsbox" data-animation="fadeIn" data-delay="100">
                <h4 style="text-indent: 1em;">了解技能</h4>
            </div>
            <div class="myzwjsbox" data-animation="fadeIn" data-delay="150">
                <p class="myzwjs">
                    node.js框架、mySQL、less、sass、frozenUI、angular框架、gulp。
                </p>
            </div>
            <div class="myzwjsbox" data-animation="fadeIn" data-delay="200">
                <h4 style="text-indent: 1em;">熟悉技能</h4>
            </div>
            <div class="myzwjsbox" data-animation="fadeIn" data-delay="250">
                <p class="myzwjs">
                    bootstrap框架、zepto、webStorm软件、Sublime_text软件、git。
                </p>
            </div>
            <div class="myzwjsbox" data-animation="fadeIn" data-delay="300">
                <h4 style="text-indent: 1em;">掌握技能</h4>
            </div>
            <div class="container">
                <div class="row" data-animation="fadeIn" data-delay="350">
                    <div class="col-xs-12">
                        <div>
                            <span>html</span><span style="float: right;margin-right: 8%;">75%</span>
                        </div>
                        <div class="progress" style="height: .6rem;margin-bottom: .2rem;">
                            <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 75%;"></div>
                        </div>
                    </div>
                </div>
                <div class="row" data-animation="fadeIn" data-delay="400">
                    <div class="col-xs-12">
                        <div>
                            <span>css</span><span style="float: right;margin-right: 8%;">70%</span>
                        </div>
                        <div class="progress" style="height: .6rem;margin-bottom: .2rem;">
                            <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 70%"></div>
                        </div>
                    </div>
                </div>
                <div class="row" data-animation="fadeIn" data-delay="450">
                    <div class="col-xs-12">
                        <div>
                            <span>js</span><span style="float: right;margin-right: 8%;">65%</span>
                        </div>
                        <div class="progress" style="height: .6rem;margin-bottom: .2rem;">
                            <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 65%"></div>
                        </div>
                    </div>
                </div>
                <div class="row" data-animation="fadeIn" data-delay="500">
                    <div class="col-xs-12">
                        <div>
                            <span>ps</span><span style="float: right;margin-right: 8%;">70%</span>
                        </div>
                        <div class="progress" style="height: .6rem;margin-bottom: .2rem;">
                            <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 70%"></div>
                        </div>
                    </div>
                </div>

            </div>
        </div>

    </div>
</div>
<script src="../js/zepto.min.v1.1.6.js"></script>
<script src="../js/frozen.js"></script>
<script src="../js/parallax.js"></script>
<script>
    $('.pages').parallax({
        direction: 'horizontal'  // 滚动方向, "horizontal/vertical"
    });
</script>
</body>
</html>